import { lazy, useMemo } from 'react'
import { useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import bus from '../../utils/eventBus'
import './index.scss'
const LdMainContainer = lazy(() => import('../../components/LdMainContainer'))
const menuListTemp = [
    { id: "1", label: "刻录", name: "BurnQueue", drawer: true, path: "/burn-task", bg: require("../../assets/first/icon-1.png") },
    { id: "2", label: "回收", name: "recoverQueue", drawer: false, path: "/layout/recover", bg: require("../../assets/first/icon-2.png") },
]
const Home = () => {
    const { enableClone = false } = useSelector((state: any) => state.licenseInfoReducer.licenseInfo)
    const navigate = useNavigate()
    const menu = useMemo(() => {
        if (!enableClone) {
            return [...menuListTemp].filter(item => item.id !== '1')
        }
        return [...menuListTemp]
    }, [enableClone])
    const handleGo = (data: any) => {
        if (!data.drawer) {
            bus.emit('refreshActiveTab', 6)
            navigate(data.path)
        } else {
            bus.emit('burnWindow')
        }
    }
    return (
        <>
            <div className='first'>
                <LdMainContainer style={{ padding: 0 }} showMenu={false}>
                    {menu.length ?
                        <div className="dashboard">
                            {menu.map((item: any, index: number) => {
                                return (
                                    <div className="item" onClick={() => handleGo(item)} key={index}>
                                        <img draggable={false} style={{ width: '100%' }} src={item.bg} />
                                        <div className="title">我要{item.label}</div>
                                    </div>
                                )
                            })}
                        </div> : <div className="dashboard-empty"></div>
                    }
                </LdMainContainer>
            </div>
        </>
    )

}
export default Home